<style lang="scss" scoped>
h3{
    color: #333;
    text-align: center;
    font-weight: bold;
    line-height: 50px;
}
.box{
    width:1200px;
    margin:20px auto;
    border-radius:4px 4px 0px 0px;
    overflow: hidden;
}
.breadcrumb{
    color: #333;
    background: #fff;
    border-bottom: 1px solid #eee;
    text-indent: 0;
    padding: 10px 0;
    a{
        color: #3684F8;
    }
}
.box{
    h5{
        background: #3684F8;
        color: #fff;
        text-align: center;
        display: flex;
        justify-content: space-between;
        line-height: 30px;
        overflow: hidden;
        border-radius:4px 4px 0 0;
        margin:0;
        span{
            width:50%;
        }
    }
    ul{
        border:1px solid #eee;
        border-top: 0;
        &>li{
            padding: 10px 0;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-around;
            line-height: 30px;
            h6{
                line-height: 50px;
                margin:0;
                font-weight: bold;
                font-size: 18px;
            }
            p{
                color: #666;
            }
            .left{
                width:40%;
                text-align: center;
                align-self:center;
            }
            .right{
                width:55%;
                li{
                    padding:10px 0;
                    h6 a:hover{
                        color: #3684F8
                    }
                }
            }
        }
        li:last-child{
            border:0;
        }
    }
    .no-res{
        text-align: center;
        line-height: 40px;
        border:1px solid #eee;
        border-top: 0;
    }
}
.red{
    color: #FD4D4D;
}
</style>
<template>
    <div class="trademark_seach">
        <trademark-top />
        <h3>搜索查询结果</h3>
        <p class="breadcrumb box">
            您当前的位置：<router-link to="trademark">商标分类</router-link>
            &gt; {{`搜索 “${$route.query.keyword}” 共${list.length}个结果`}}
        </p>
        <div class="box">
            <h5><span>所属类别</span> <span>类似群组（商品/服务名称）</span></h5>
            <ul v-if="list.length">
                <li v-for="val in list" :key="val.id">
                    <div class="left">
                        <h6 v-show="val.code">第{{val.code | toChinesNum}}类</h6>
                        <p>{{val.name}}</p>
                    </div>
                    <ol class="right">
                        <li v-for="vv in val.child" :key="vv.id">
                            <h6>
                                <router-link :to="{ name:'classify_detail',query:{code:vv.code} }">
                                    {{'【'+vv.code+'】- '+vv.name}}
                                </router-link>
                             </h6>
                            <p v-html="vv.keyword"></p>
                        </li>
                    </ol>
                </li>
            </ul>
            <p v-else class="no-res">暂无搜索结果</p>
        </div>
        <Footer/>
    </div>
</template>
<script>
import ("@/assets/init.scss")
import trademarkTop      from "@/components/trademark_top"
import Footer      from "@/components/footer"
import {trademark_search} from "@/assets/api"
export default {
    data(){
        return {
            list:[]
        }
    },
    components:{
        trademarkTop,
        Footer
    },
    filters:{
        toChinesNum(num){
            let changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']; //changeNum[0] = "零"
            let unit = ["", "十"];
            num = parseInt(num);
            let getWan = (temp) => {
            let strArr = temp.toString().split("").reverse();
            let newNum = "";
            for (var i = 0; i < strArr.length; i++) {
                newNum = (i == 0 && strArr[i] == 0 ? "" : (i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ? "" : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i]))) + newNum;
                }
                return newNum;
            }
            let overWan = Math.floor(num / 10000);
            let noWan = num % 10000;
            if (noWan.toString().length < 4) noWan = "0" + noWan;
            return overWan ? getWan(overWan) + "万" + getWan(noWan) : getWan(num);
        }
    },
    methods:{
        getSeach(){
            const str=this.$route.query.keyword
            trademark_search({keyword:str})
            .then(res=>{
                if(res){
                    res.data.list.forEach(els=>{
                        els.child.forEach(el=>{
                            const keyword=el.child.map(ee=>{
                                if(ee.name.indexOf(str)>-1){
                                    ee.name=ee.name.replace(str,`<span style='color:#FD4D4D'>${str}</span>`);
                                }
                                return ee.name+ee.code
                            })
                            el.keyword=keyword.join('，')
                        })
                    })
                    
                    this.list=res.data.list
                    
                }
            })
        }
    },
    watch:{
        "$route.query.keyword":{ 
             handler: 'getSeach',
             immediate: true
        }
    },
    created(){
        this.getSeach()
    }
}
</script>